<template>
  <div>
    <div class="activeTop">
      <div>
        <el-button type="primary" @click="$router.push({ name: 'fullRedAdd' })"
          >新增满减活动</el-button
        >
        <el-select
          v-model="getTypeValue"
          placeholder="全部状态"
          class="activeTop__sel"
          @change="selecType"
        >
          <el-option
            v-for="item in activeTypeList"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div style="display:flex;">
        <el-date-picker
          v-model="useDateValue"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin-left:40px"
          @change="searchByInput"
        ></el-date-picker>
      </div>
    </div>
    <Activies :fullList="fullList" />
    <PageManage
      :pageSize="search.size"
      :pageNum="search.current"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></PageManage>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Activies from "./Activies.vue";
import PageManage from "@/components/PageManage.vue";
import { getFullActivity } from "@/api/fullReduce/fullActive";
import DateUtil from "@/store/modules/date";

@Component({
  components: {
    Activies,
    PageManage,
  },
})
export default class Index extends Vue {
  /** 搜索活动状态 */
  activeTypeList = [
    {
      id: "3",
      label: "全部状态",
    },
    {
      id: "0",
      label: "未开始",
    },
    {
      id: "1",
      label: "进行中",
    },
    {
      id: "2",
      label: "已结束",
    },
  ];

  /** 当前选中状态 */
  getTypeValue = "";

  /** 固定时间 */
  useDateValue = "";

  total = 20;

  /** 搜索条件 */
  search = {
    current: 1,
    size: 10,
    startTime: "",
    endTime: "",
    status: "",
  };

  /** 满减数组 */
  fullList = [];

  mounted() {
    this.getFullList();
  }

  /**
   * 获取满减列表
   */
  getFullList() {
    getFullActivity(this.search).then(res => {
      res.data.list.forEach(item => {
        item.startTime = new DateUtil("").getYMDs(item.startTime);
        item.endTime = new DateUtil("").getYMDs(item.endTime);
      });
      this.fullList = res.data.list;
      this.total = res.data.total;
    });
  }

  /**
   * 选择优惠券类型
   */
  selecType(e) {
    this.search.status = e !== "3" ? e : "";
    this.search.current = 1
    this.getFullList();
  }

  /**
   * 根据时间搜索
   */
  searchByInput(e) {
    this.search.current = 1
    this.search.startTime = this.useDateValue
      ? new DateUtil("").getYMDs(e[0])
      : "";
    this.search.endTime = this.useDateValue
      ? new DateUtil("").getYMDs(e[1])
      : "";

    this.getFullList();
  }

  /**
   * @method handleSizeChange
   * @description 每页 条
   */
  handleSizeChange(val) {
    this.search.size = val;
    this.search.current = 1
    this.getFullList();
  }

  /**
   * @method handleCurrentChange
   * @description 当前页
   */
  handleCurrentChange(val) {
    this.search.current = val;
    this.getFullList();
  }
}
</script>

<style lang="scss" scoped>
.activeTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  &__sel {
    margin-left: 20px;
    width: 120px;
  }
}

.serachBtn {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dcdfe6;
  background-color: white;
  cursor: pointer;
  border-left: none;
  border-radius: 4px;
}
</style>
